<template>
  <div>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <!-- 输入框 -->
        <el-col :span="5" :offset="18">
          <el-input
            placeholder="输入填报人查找"
            v-model="search1"
            clearable
            @clear="getuserlist"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table
        :data="
          FData1.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
        stripe
        :cell-style="{ 'text-align': 'center' }"
        :header-cell-style="{
          'text-align': 'center',
          background: '#E4E7ED',
          color: '#606266',
        }"
      >
        <el-table-column label="表单ID" prop="form_id"> </el-table-column>
        <el-table-column label="表单名" prop="type_name"> </el-table-column>
        <el-table-column label="申请日期" prop="created_at"></el-table-column>
        <el-table-column label="填报人" prop="applicant_name">
        </el-table-column>
        <el-table-column label="处理结果" prop="status_name"> </el-table-column>
        <el-table-column label="操作" width="210px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="look(scope.row)"
              >查看</el-button
            >
            <el-button type="success" size="mini" @click="Export(scope.row)">
              导出
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 设备借用表 -->
      <el-dialog
        title="设备借用表"
        :visible.sync="approveDialogVisible"
        width="30%"
        center
        height="50%"
      >
        <el-form label-width="70px">
          <el-form-item label="借用部门" prop="borrow_department">
            <el-input
              v-model="approveForm.borrow_department"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="借用用途" prop="borrow_application">
            <el-input
              v-model="approveForm.borrow_application"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="借用时间" prop="destine_start_time">
            <el-input
              v-model="approveForm.destine_start_time"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item
            label="借用人"
            prop="borrower_name"
            style="width: 45%; display: inline-block"
          >
            <el-input v-model="approveForm.borrower_name" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="电话号码"
            prop="borrower_phone"
            style="width: 45%; display: inline-block; margin-left: 40px"
          >
            <el-input v-model="approveForm.borrower_phone" disabled></el-input>
          </el-form-item>
          <h3>设备借用清单</h3>
          <el-table :data="equipmentList" border stripe height="140">
            <el-table-column label="设备名称" prop="equipment_name">
            </el-table-column>
            <el-table-column label="型号" prop="model"> </el-table-column>
            <el-table-column label="借用数量" prop="number"></el-table-column>
            <el-table-column label="附件" prop="annex"> </el-table-column>
          </el-table>
          <el-form>
            <el-form-item label="审批结果:" style="margin-top: 20px">
              <div style="font-size: 22px; text-align: left; margin-left: 15px">
                {{ tableDataReason }}
              </div>
            </el-form-item>
          </el-form>
        </el-form>
      </el-dialog>

      <!-- 实验室借用申请 -->
      <el-dialog
        title="实验室借用申请表"
        :visible.sync="JieYongDialogVisible"
        center
        width="60%"
      >
        <el-form label-width="130px" :model="tableData">
          <el-form-item label="实验室编号" prop="laboratory_id">
            <el-input v-model="tableData.laboratory_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="课程名称" prop="course_name">
            <el-input v-model="tableData.course_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="学生班级编号" prop="class_id">
            <el-input v-model="tableData.class_id" disabled></el-input>
          </el-form-item>
          <el-form-item label="人数" prop="number">
            <el-input v-model="tableData.number" disabled></el-input>
          </el-form-item>
          <el-form-item label="实验目的" prop="purpose">
            <el-input v-model="tableData.purpose" disabled></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="tableData.phone" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="开始使用时间（第几节课）"
            prop="start_class"
            style="width: 40%; display: inline-block; margin-left: 0%"
            label-width="53%"
          >
            <el-input v-model="tableData.start_class" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="结束使用时间（第几节课）"
            prop="end_class"
            style="width: 40%; display: inline-block; margin-left: 20%"
            label-width="53%"
          >
            <el-input v-model="tableData.end_class" disabled></el-input>
          </el-form-item>
          <el-form-item label="审批结果:" id="add">
            <div style="font-size: 22px; text-align: left; margin-left: 15px">
              {{ tableDataReason }}
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 开放实验室使用申请 -->
      <el-dialog
        title="开放实验室使用申请"
        :visible.sync="KaiFangDialogVisible"
        width="60%"
        center
      >
        <el-form
          label-width="70px"
          style="margin-bottom: 30px"
          :model="KaiFangForm"
        >
          <el-form-item label="使用原因" prop="reason_use">
            <el-input
              v-model="KaiFangForm.reason_use"
              type="textarea"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="项目名称" prop="porject_name">
            <el-input v-model="KaiFangForm.porject_name" disabled></el-input>
          </el-form-item>
          <el-form-item
            label="开始使用时间"
            prop="start_time"
            style="width: 40%; display: inline-block; margin-left: 0%"
            label-width="100px"
          >
            <el-input
              v-model="KaiFangForm.start_time"
              disabled
              style="margin-left: 0px"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="结束使用时间"
            prop="end_time"
            style="width: 40%; display: inline-block; margin-left: 20%"
            label-width="100px"
          >
            <el-input
              v-model="KaiFangForm.end_time"
              disabled
              style="margin-left: 0px"
            ></el-input>
          </el-form-item>
          <h3>申请学生名单</h3>
          <el-table :data="ApplyList" border stripe height="94">
            <el-table-column label="姓名" prop="student_name">
            </el-table-column>
            <el-table-column label="学号" prop="student_id"> </el-table-column>
            <el-table-column label="联系电话" prop="phone"></el-table-column>
            <el-table-column label="承担工作" prop="work"> </el-table-column>
          </el-table>
          <el-form>
            <el-form-item label="审批结果:" style="margin-top: 20px">
              <div style="font-size: 22px; text-align: left; margin-left: 15px">
                {{ tableDataReason }}
              </div>
            </el-form-item>
          </el-form>
        </el-form>
        <span style="text-indent: 2em">
          疫情特殊时期,我承诺学生进入实验室后第一时间给学生宣讲《实验室疫情个人防护常识》
          ,并拍照存档。在实验室期间要求同尝们隔位而坐。配合实验中心相关工作安排。
        </span>
      </el-dialog>

      <!-- 实验室运行记录表 -->
      <el-dialog
        title="成都东软学院实验室运行记录"
        :visible.sync="YunXingDialogVisible"
        width="70%"
        center
      >
        <el-table
          border
          stripe
          :cell-style="{ 'text-align': 'center' }"
          :header-cell-style="{
            'text-align': 'center',
            background: '#E4E7ED',
            color: '#606266',
          }"
          :data="RunningForm"
          style="margin-bottom: 30px"
        >
          <el-table-column label="#" type="index"></el-table-column>
          <el-table-column label="周次" prop="week"></el-table-column>
          <el-table-column label="时间" prop="time"></el-table-column>
          <el-table-column
            label="专业班级（综合班）"
            prop="class_id"
          ></el-table-column>
          <el-table-column label="人数" prop="number"></el-table-column>
          <el-table-column
            label="课程名称/实验项目"
            prop="class_name"
          ></el-table-column>
          <el-table-column label="课程类型" prop="class_type"></el-table-column>
          <el-table-column label="任课教师" prop="teacher"></el-table-column>
          <el-table-column
            label="设备运行情况"
            prop="situation"
          ></el-table-column>
          <el-table-column label="备注" prop="remark"></el-table-column>
        </el-table>
        <span style="margin-top: 5px">
          谪写说明: 1.周次:本学期第几周; 2.时间:日期和具体时间;
          3.专业班级:实验室课谪专业班或综合班名称,开放实验填学生本专业名称;
          4.学生姓名:实验课不填; 5.人数:实验课填具体人数,开放实验不填;
          6.课程名称∶实验课填课程名称和实验项目，开放实验只填实验项目名称;
          7.课程类型:“必修、选修、开放”;
          8.设备运行情况:(正常、报修，报修电话:64888041); 9.备注;
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 获取用户列表的参数对象
      queryInfo: {
        // 搜索关键字
        query: "",
      },
      userlist: [],
      Formname: {
        name: "",
      },
      currentPage: 1,
      pageSize: 8,
      total: 0,
      formData1: [],
      search1: "",
      showHeader: false,
      approveDialogVisible: false,
      KaiFangDialogVisible: false,
      YunXingDialogVisible: false,
      JieYongDialogVisible: false,
      // 实验室运行记录表
      RunningForm: [],
      // 设备借用表
      approveForm: {},
      // 开放实验室使用申请
      KaiFangForm: {},
      //开放实验室使用申请 申请学生名单
      ApplyList: [],
      // 设备借用清单
      equipmentList: [],
      // 实验室借用申请
      tableData: {},
      // 实验室借用申请表原因
      tableDataReason: {},
      // 否决原因
      selectArea: {},
      optionArea: [
        {
          value: "选项1",
          label: "设备借用表",
        },
        {
          value: "选项2",
          label: "开放实验室使用申请",
        },
        {
          value: "选项3",
          label: "实验室借用申请",
        },
        {
          value: "选项4",
          label: "实验室运行记录表",
        },
      ],
      form: {
        course_name: "",
        student_spec: "",
      },
    };
  },
  created() {
    this.getuserlist();
  },
  methods: {
    async getuserlist() {
      const { data: res } = await this.$http.get(
        "/api/superadmin/selectformcomplete",
        {
          params: this.queryInfo,
        }
      );
      if (res.code !== 200) {
        return this.$message.error("获取表单列表失败！");
      }
      this.userlist = res.data;
      this.total = res.data.length;
    },
    // 监听  pagesize 改变的事件
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // // 监听 页码值 改变的事件
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    // 查看
    async look(formName) {
      if (formName.type_name == "实验室仪器设备借用单") {
        this.approveDialogVisible = true;

        sessionStorage.setItem("EquipmentList", formName.form_id);
        const { data: res } = await this.$http.post(
          "/api/student/selectequipmentborrow",
          {
            form_id: formName.form_id,
          }
        );

        this.approveForm = res.data;
        const { data: re } = await this.$http.post(
          "/api/student/selectequipmentlist",
          {
            form_id: formName.form_id,
          }
        );

        this.equipmentList = re.data;
        this.tableDataReason = formName.reason;
      } else if (formName.type_name == "实验室运行记录") {
        this.YunXingDialogVisible = true;
        sessionStorage.setItem("Running", formName.form_id);
        const { data: res } = await this.$http.post(
          "/api/student/selectlabrun",
          {
            form_id: formName.form_id,
          }
        );

        if (res.code !== 200) {
          return this.$message.error("获取实验室运行记录失败！");
        }
        this.$message.success("成功获取实验室运行记录！");
        this.RunningForm = res.data;
      } else if (formName.type_name == "开放实验室使用申请单") {
        sessionStorage.setItem("KaiFang", formName.form_id);
        this.KaiFangDialogVisible = true;
        const { data: res } = await this.$http.post(
          "/api/student/openlabselect",
          {
            form_id: formName.form_id,
          }
        );

        if (res.code !== 200) {
          return this.$message.error("获取开放实验室使用申请单信息失败！");
        }
        this.$message.success("成功获取开放实验室使用申请单信息！");
        this.KaiFangForm = res.data[0];
        const { data: re } = await this.$http.post(
          "/api/student/openlabselectstu",
          {
            form_id: formName.form_id,
          }
        );

        if (res.code !== 200) {
          return this.$message.error(
            "获取开放实验室使用申请单在学生信息失败！"
          );
        }
        this.$message.success("成功获取开放实验室使用申请单在学生信息！");
        this.ApplyList = re.data;
        this.tableDataReason = formName.reason;
      } else if (formName.type_name == "实验室借用申请表单") {
        this.JieYongDialogVisible = true;

        sessionStorage.setItem("LabBorrow", formName.form_id);
        const { data: res } = await this.$http.post(
          "/api/student/selectlabloan",
          {
            form_id: formName.form_id,
          }
        );

        if (res.code !== 200) {
          return this.$message.error("获取实验室借用申请信息失败！");
        }
        this.$message.success("成功获取实验室借用申请信息！");
        this.tableData = res.data;
        this.tableDataReason = formName.reason;
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 2) {
        if (columnIndex === 1) {
          return [1, 3];
        }
      } else if (rowIndex === 4) {
        if (columnIndex === 1) {
          return [1, 3];
        }
      }
    },
    async search() {
      const { data: res } = await this.$http.post(
        "/api/superadmin/selectcompletebypeople",
        {
          applicant_name: this.queryInfo.query,
        }
      );
      console.log(res);
    },
    // 导出
    Export(info) {
      sessionStorage.setItem("reason", info.reason);

      if (info.type_name == "实验室仪器设备借用单") {
        this.$router.push("/equipmentList");
      } else if (info.type_name == "实验室运行记录") {
        this.$router.push("/RunningForm");
      } else if (info.type_name == "开放实验室使用申请单") {
        this.$router.push("/KaiFang");
      } else if (info.type_name == "实验室借用申请表单") {
        this.$router.push("/labBorrow");
      }
    },
  },
  computed: {
    FData1: function () {
      var search1 = this.search1;
      if (search1) {
        return this.userlist.filter(function (dataNews) {
          return Object.keys(dataNews).some(function (key) {
            return String(dataNews[key]).toLowerCase().indexOf(search1) > -1;
          });
        });
      }
      return this.userlist;
    },
  },
};
</script>

<style>
.el-button--goon {
  background: #20b2aa !important;
  color: #fafdfd !important;
  font-size: 14px !important;
}
.el-table-column {
  text-align: center;
}
.el-form-item {
  text-align: center;
}
h3 {
  text-align: center;
}
.addbtn {
  float: right;
  width: 95px;
}
</style>